.basic-demo {
    font-size: 96px;
    text-align: center;
}

.my-zoom-in {
    opacity: 0;
}

.my-zoom-in-active {
    animation: my-zoom-in 500ms linear;
}

.my-zoom-out {
    opacity: 1;
}

.my-zoom-out-active {
    animation: my-zoom-out 500ms linear;
}

@keyframes my-zoom-in {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes my-zoom-out {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}
